<template>
  <div>
    <div class="find">
      <div class="find-title">
        <div class="find-title-email find-title-common">
          <img
            @click="onclick2"
            class="find-title-img"
            src="../../assets/images/发现/消息图标@2x.png"
            alt=""
            v-if="flag"
          />
          <img
            @click="onclick2"
            class="find-title-img"
            src="../../assets/images/樊登讲书/消息图标1.png"
            alt=""
            v-else
          />
        </div>
        <div class="find-title-typeface">发现</div>
        <div class="find-title-serch find-title-common">
          <img
            @click="onclick3"
            class="find-title-img2"
            src="../../assets/images/发现/搜索@2x.png"
            alt=""
          />
        </div>
      </div>
    </div>
    <div class="find-lunbo">
      <van-swipe
        :loop="false"
        :width="300"
        :show-indicators="false"
        :height="135"
      >
        <van-swipe-item class="find-lunbo-common">
          <a href="">
            <img
              class="find-lunbo-img"
              src="../../assets/images/发现/lun1.png"
              alt=""
            />
          </a>
        </van-swipe-item>
        <van-swipe-item class="find-lunbo-common">
          <a href="">
            <img
              class="find-lunbo-img"
              src="../../assets/images/发现/lun2.png"
              alt=""
            />
          </a>
        </van-swipe-item>
        <van-swipe-item class="find-lunbo-common">
          <a href="">
            <img
              class="find-lunbo-img"
              src="../../assets/images/发现/lun3.png"
              alt=""
            />
          </a>
        </van-swipe-item>
        <van-swipe-item class="find-lunbo-common">
          <a href="">
            <img
              class="find-lunbo-img"
              src="../../assets/images/发现/lun4.png"
              alt=""
            />
          </a>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="find-content find-left">
      <van-row gutter="20" justify="space-between">
        <van-col span="12" gutter="2">
          <a href="">
            <span class="find-content-title1 find-content-common"
              >早茶电台</span
            >
            <span class="find-content-title2 find-content-common">></span>
          </a>
        </van-col>
        <van-col span="12" class="find-content-col-button">
          <van-button
            round
            type="default"
            size="small"
            class="find-content-button"
          >
            <a href=""
              ><img
                class="find-content-button-img"
                src="../../assets/images/发现/v1.png"
                alt=""
              />
            </a>
            播放全部</van-button
          >
        </van-col>
      </van-row>
      <van-row gutter="20" class="find-content-bottom">
        <van-col span="1">
          <img
            class="find-content-bottom-common1"
            src="../../assets/images/发现/content1.png"
            alt=""
          />
        </van-col>
        <van-col span="18" style=" ;" class="find-content-bottom3">
          <div class="van-ellipsis find-content-bottom-common2">
            阿森 | 书籍的千年穿越
          </div>
        </van-col>
      </van-row>
      <van-row gutter="20" class="find-content-bottom-b">
        <van-col span="1">
          <img
            class="find-content-bottom-common1"
            src="../../assets/images/发现/content1.png"
            alt=""
          />
        </van-col>
        <van-col span="18" style=" ;" class="find-content-bottom3">
          <div class="van-ellipsis find-content-bottom-common2">
            赵健小书摊 | 少年不识愁滋
          </div>
        </van-col>
      </van-row>
      <div class="find-recomnd">
        <div class="find-recomnd-banner">为你推荐</div>
        <van-tabs
          class="find-recomnd-list active"
          title-active-color="black"
          line-width="21px"
          line-height="4px"
        >
          <!-- 为你推荐列表页 -->
          <van-tab
            v-for="(item, index) in state1.msg"
            :title="item"
            :key="index"
          >
            <van-pull-refresh v-model="state.loading" @refresh="onRefresh">
              <div class="find-recomd-xuanran">
                <div class="find-content wrapper-flex">
                  <div
                    class="
                      find-recomd-xuanleft find-recomd-xuanleft-common
                      clearfix
                    "
                    v-for="(item, index) in data"
                    :key="index"
                  >
                    <div class="a1 clearfix" @click="onclick1">
                      <img class="find-recomd-XF-img" :src="item.img" alt="" />
                      <h5 class="find-recomd-content">{{ item.content }}</h5>
                      <van-row justify="space-between">
                        <van-col span="12" class="find-recomd-iconpart">
                          <img
                            class="find-recomd-icon"
                            :src="item.icon"
                            alt=""
                          />
                          <span class="find-recomd-icontypes">{{
                            item.icontypes
                          }}</span>
                        </van-col>
                        <van-col span="12" class="find-recomd-dianzhanpart">
                          <span class="find-recomd-dianzhan">{{
                            item.dianzhan
                          }}</span>
                          <img
                            class="find-recomd-dianimg"
                            :src="item.dianimg"
                            alt=""
                          />
                        </van-col>
                      </van-row>
                    </div>

                    <div class="find-recomd-box2 a1 clearfix">
                      <div>
                        <img
                          class="find-recomd-box2-icon2"
                          :src="item.icon2"
                          alt=""
                        />
                      </div>
                      <div class="find-recomd-box2-content2">
                        {{ item.content2 }}
                      </div>
                      <div class="find-recomd-box2-taolun2left">
                        {{ item.taolun2left }}
                      </div>
                      <div class="find-recomd-box2-taolun2right">
                        {{ item.taolun2right }}
                      </div>
                    </div>
                    <div class="a1 clearfix a3">
                      <img class="find-recomd-XF-img" :src="item.img3" alt="" />
                      <h5 class="find-recomd-content">{{ item.content3 }}</h5>
                      <van-row justify="space-between">
                        <van-col span="12" class="find-recomd-iconpart">
                          <img
                            class="find-recomd-icon"
                            :src="item.icon3"
                            alt=""
                          />
                          <span class="find-recomd-icontypes">{{
                            item.icontypes3
                          }}</span>
                        </van-col>
                        <van-col span="12" class="find-recomd-dianzhanpart">
                          <span class="find-recomd-dianzhan">{{
                            item.dianzhan3
                          }}</span>
                          <img
                            class="find-recomd-dianimg"
                            :src="item.dianimg3"
                            alt=""
                          />
                        </van-col>
                      </van-row>
                    </div>
                    <div class="a1 clearfix a4">
                      <img class="find-recomd-XF-img" :src="item.img4" alt="" />
                      <h5 class="find-recomd-content">{{ item.content4 }}</h5>
                      <van-row justify="space-between">
                        <van-col span="12" class="find-recomd-iconpart">
                          <img
                            class="find-recomd-icon"
                            :src="item.icon4"
                            alt=""
                          />
                          <span class="find-recomd-icontypes">{{
                            item.icontypes4
                          }}</span>
                        </van-col>
                        <van-col span="12" class="find-recomd-dianzhanpart">
                          <span class="find-recomd-dianzhan">{{
                            item.dianzhan4
                          }}</span>
                          <img
                            class="find-recomd-dianimg"
                            :src="item.dianimg4"
                            alt=""
                          />
                        </van-col>
                      </van-row>
                    </div>
                    <div class="find-recomd-box2 a1 a5 clearfix">
                      <div>
                        <img
                          class="find-recomd-box2-icon2"
                          :src="item.icon2"
                          alt=""
                        />
                      </div>
                      <div class="find-recomd-box2-content2">
                        {{ item.content2 }}
                      </div>
                      <div class="find-recomd-box2-taolun2left">
                        {{ item.taolun2left }}
                      </div>
                      <div class="find-recomd-box2-taolun2right">
                        {{ item.taolun2right }}
                      </div>
                    </div>
                    <div class="a1 a6 clearfix">
                      <img class="find-recomd-XF-img" :src="item.img" alt="" />
                      <h5 class="find-recomd-content">{{ item.content }}</h5>
                      <van-row justify="space-between">
                        <van-col span="12" class="find-recomd-iconpart">
                          <img
                            class="find-recomd-icon"
                            :src="item.icon"
                            alt=""
                          />
                          <span class="find-recomd-icontypes">{{
                            item.icontypes
                          }}</span>
                        </van-col>
                        <van-col span="12" class="find-recomd-dianzhanpart">
                          <span class="find-recomd-dianzhan">{{
                            item.dianzhan
                          }}</span>
                          <img
                            class="find-recomd-dianimg"
                            :src="item.dianimg"
                            alt=""
                          />
                        </van-col>
                      </van-row>
                    </div>
                  </div>
                </div>
              </div>
            </van-pull-refresh>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
  <div></div>
</template>

<script>
import { reactive, onMounted, computed, ref } from "vue";
import { Toast } from "vant";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

export default {
  setup() {
    const store = useStore();
    const getgetFind = () => store.dispatch("getgetFind");
    onMounted(() => {
      getgetFind();
    });

    const data = computed(() => {
      return store.state.getFind.getFindContent.result;
    });
    const state1 = reactive({
      msg: ["推荐", "精选视频", "亲子育儿", "终身成长", "亲密关系", "人文通识"],
    });
    const router = useRouter();
    const state = reactive({
      count: 0,
      loading: false,
    });
    const onclick1 = () => {
      router.push("/video");
    };
    const onclick2 = () => {
      router.push("/information");
    };
    const flag = ref(true);
    if (localStorage.getItem("information")) {
      flag.value = false;
    }
    const onclick3 = () => {
      router.push("/search");
    };
    const onRefresh = () => {
      setTimeout(() => {
        Toast("刷新成功");
        state.loading = false;
        state.count++;
      }, 1000);
    };
    return {
      flag,
      state1,
      data,
      state,
      onRefresh,
      onclick1,
      getgetFind,
      onclick2,
      onclick3,
    };
  },
};
</script>

<style lang="postcss" scoped>
* {
  margin: 0;
  padding: 0;
}
.find-title {
  display: flex;
  align-content: center;
  justify-content: space-between;
  height: 66px;
  padding-right: 15px;
  padding-left: 5px;
}
.find-title-common {
  width: 24px;
  height: 24px;
  align-self: center;
}
.find-title-img {
  display: block;
  height: 24px;
  width: 24px;
}
.find-title-img2 {
  display: block;
  height: 24px;
  width: 24px;
}
.find-title-typeface {
  align-self: center;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #000000;
}
.find-title-serch {
  width: 19px;
  height: 20px;
}
.find-title-email {
  padding-left: 6px;
}

.find-title-serch {
  padding-right: 6px;
}
.find-lunbo {
  padding-left: 12px;
}
.find-lunbo-common {
  padding-right: 5px;
  box-sizing: border-box;
}
.find-lunbo-img {
  display: block;
  width: 100%;
  height: 100%;
}

.find-content {
  margin-top: 32px;
  padding: 0 0 20px 0;
}
.find-left {
  margin-left: 12px;
}
.find-content-title1 {
  width: 75px;
  height: 18px;
  font-size: 19px;
  line-height: 20px;
}
.find-content-common {
  font-family: PingFang SC;
  font-weight: bold;
  color: #000000;
}
.find-content-title2 {
  font-size: 12px;
  line-height: 20px;
  margin-left: 5px;
}
.find-content-col-button {
  display: flex;
  justify-content: flex-end;
  padding-right: 14px;
}
.find-content-button {
  width: 96px;
  height: 28px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #4a4746;
  line-height: 0px;
}
.find-content-button-img {
  width: 8px;
  height: 10px;
}
.find-content-bottom {
  margin-top: 18px;
}
.find-content-bottom-common1 {
  width: 19px;
  height: 19px;
}
.find-content-bottom-common2 {
  margin-left: 5px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #4a4746;
}
.find-content-bottom3 {
  display: flex;
  align-items: center;
}
.find-content-bottom-b {
  margin-top: 9px;
}
.find-recomnd {
  margin-top: 36px;
  margin-bottom: 17px;
}
.find-recomnd-banner {
  text-align: left;

  /* height: 18px; */
  font-size: 19px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #000000;
  line-height: 20px;
}
.find-recomd-xuanleft-common {
  width: 100%;
}
.find-recomd-XF-img {
  width: 180px;
  height: 114px;
}
.find-recomd-content {
  height: 13px;
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 20px;
  margin-bottom: 7px;
}
.find-recomd-icon {
  width: 19px;
  height: 19px;
}
.find-recomd-icontypes {
  height: 10px;
  font-size: 10px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #999999;
  line-height: 10px;
}
.find-recomd-iconpart {
  display: flex;
  align-items: center;
}
.find-recomd-dianzhan {
  font-size: 10px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #999999;
  line-height: 20px;
}
.find-recomd-dianimg {
  width: 12px;
  height: 12px;
  margin-left: 2px;
  line-height: 20px;
}
.find-recomd-dianzhanpart {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.find-recomd-box2 {
  position: relative;
  height: 200px;
  margin-left: 5px;
  border-radius: 10px;
  width: 170px;
  background: linear-gradient(0deg, #f68f8f 0%, #e76e6e 100%);
}
.find-recomd-box3 {
  height: 200px;
  background: coral;
  width: 170px;
  margin-right: 5px;
}
.a1 {
  float: left;
}
.a1:nth-child(2n) {
  float: left;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
.find-recomd-box2-icon2 {
  width: 19px;
  height: 19px;
  margin-left: 10px;
  margin-top: 10px;
}
.find-recomd-box2-content2 {
  width: 150px;

  font-size: 18px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ffffff;
  line-height: 23px;
  margin-left: 10px;
}
.find-recomd-box2-taolun2left {
  position: absolute;
  left: 10px;
  top: 170px;
  font-size: 9px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ffffff;
  /* line-height: 23px; */
}
.find-recomd-box2-taolun2right {
  position: absolute;
  left: 80px;
  top: 170px;
  font-size: 9px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ffffff;
}
.a4 {
  margin-top: 5px;
  margin-left: 1px;
}
</style>
